<template>
  <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
    <vue-office-pdf 
        :src="urlEncoding(modelValue)"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
  </div>
</template>

<script setup name="PDFViewer" lang="ts">
import { defineModel } from 'vue';
import VueOfficePdf from '@vue-office/pdf'

const modelValue = defineModel('url', {
  type: String,
  default: 'abc',
  required: true
});

const urlEncoding = (url: string) => {
  return encodeURIComponent(url)
}

const renderedHandler = (e: any) => {
  console.log('rendered', e)
}

const errorHandler = (e: any) => {
  console.log('error', e)
}

const trial = ()=>{
  console.log(modelValue.value)

}

onMounted(() => {
  
});
</script>
